<template>
	  
	<div>
		    <!-- 简单使用递归：嵌套的数据格式必须一致，必须要有终止判断 -->
		    <Tree nav="nav" :data="data"></Tree>   
	</div>
</template>

<script>
import Tree from './Tree'
export default {
	data() {
		return {
			data: [
				{
					name: '首页',
					list: [{ name: 'home1' }, { name: 'home2' }, { name: 'home3' }],
				},
				{
					name: '新闻',
					list: [
						{
							name: '资讯',
							list: [{ name: '昨日资讯' }, { name: '今日资讯' }],
						},
						{
							name: '热点',
							list: [{ name: 'xxx又打人了' }],
						},
					],
				},
			],
		}
	},
	components: { Tree },
}
</script>
<style lang='scss'>
//公共样式
.parent {
	//子菜单，默认是隐藏的
	& > .submenu {
		display: none;
	}
	&:hover {
		.submenu {
			display: block;
		}
	}
}
//end
.nav {
	display: flex;
	& > li {
		& > span {
			border: 1px solid red;
		}
	}
}
</style>